<template>
    <div class="app-container">
       <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
             <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['contact:add']">新增</el-button>
          </el-col>
       </el-row>
       <!-- 表格数据 -->
       <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
          <el-table-column label="服务到期日期" align="center" prop="riqi" :show-overflow-tooltip="true" />
          <el-table-column label="运维负责人" align="center" prop="ren" :show-overflow-tooltip="true" />
          <el-table-column label="联系电话" align="center" prop="phoneNumber" :show-overflow-tooltip="true" />
          <el-table-column label="创建时间" align="center" prop="createTime" >
             <template #default="scope">
                <span>{{ parseTime(scope.row.createTime) }}</span>
             </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" >
             <template #default="scope">
                <el-tooltip content="修改" placement="top">
                   <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                      v-hasPermi="['contact:edit']"></el-button>
                </el-tooltip>
                <el-tooltip content="删除" placement="top">
                   <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
                      v-hasPermi="['contact:remove']"></el-button>
                </el-tooltip>
             </template>
          </el-table-column>
       </el-table>
       <!-- 添加或修改配置对话框 -->
       <el-dialog :title="title" v-model="open" width="500px" append-to-body>
          <el-form ref="roleRef" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="服务日期" prop="phoneNumber">
                <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD"
                start-placeholder="开始日期"></el-date-picker>
             </el-form-item>
            <el-form-item label="运维负责人" prop="gongyingshang">
                <el-input v-model="form.gongyingshang" :disabled="isEdit" placeholder="请输入供应商" />
             </el-form-item>
             <el-form-item label="联系电话" prop="ren">
                <el-input v-model="form.gongyingshang" :disabled="isEdit" placeholder="请输入编号" />
             </el-form-item>
          </el-form>
          <template #footer>
             <div class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
             </div>
          </template>
       </el-dialog>
    </div>
 </template>
 
 <script setup name="property">
 import { deptTreeSelect } from "@/api/system/user"
 import { getBoss,listDept } from "@/api/system/dept"
 import { add, page, del, update, details } from "@/api/cmdb/basic";
 const router = useRouter();
 const { proxy } = getCurrentInstance();
//  const { sys_contact_status } = proxy.useDict("sys_contact_status");

 
 const options = ref([])
 const roleList = ref([]);
 const open = ref(false);
 const loading = ref(true);
 const showSearch = ref(true);
 const ids = ref([]);
 const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
 const title = ref("");
 const dateRange = ref([]);
 const menuExpand = ref(false);
 const menuNodeAll = ref(false);
 const deptExpand = ref(true);
 const deptNodeAll = ref(false);
 const menuRef = ref(null);
 
 const data = reactive({
    form: {},
    queryParams: {
       pageNum: 1,
       pageSize: 10,
    },
    rules: {
       contactsName: [{ required: true, message: "名称不能为空", trigger: "blur" }],
    },
 });
 
 const { queryParams, form, rules } = toRefs(data);
 

 
 
 /** 查询列表 */
 function getList() {
    // loading.value = true;
    if (dateRange.value && dateRange.value.length > 0) {
       queryParams.value.createTimeStart = dateRange.value[0]
       queryParams.value.createTimeEnd = dateRange.value[1]
    } else {
       queryParams.value.createTimeStart = undefined
       queryParams.value.createTimeEnd = undefined
    }
    // page(proxy.addDateRange(queryParams.value)).then(response => {
    //    roleList.value = response?.data?.rows;
    //    total.value = response?.data?.total;
    //    loading.value = false;
    // });
       loading.value = false;
       roleList.value = [
        {
            riqi:'2026-12-14',
            ren:'张明',
            phoneNumber:'136968318631',
        }
    ]
    total.value = 1
 }
 
 /** 搜索按钮操作 */
 function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
 }
 
 /** 重置按钮操作 */
 function resetQuery() {
    dateRange.value = [];
    queryParams.value.createTimeStart = undefined
    queryParams.value.createTimeEnd = undefined
    proxy.resetForm("queryRef");
    handleQuery();
 }
 
 /** 删除按钮操作 */
 function handleDelete(row) {
    return
    const Ids = row.id || ids.value;
    let names = [];
      if(Array.isArray(Ids)){
      roleList.value.forEach(_=>{
          return Ids.forEach(el =>{
             if(_.id == el){
                names.push(_.contactsName)
             }
          })
       })
       console.log(names.join(','));
      }else{
       names =  roleList.value.find(_=>{
          return _.id == Ids
       }).contactsName
      }
  
    proxy.$modal.confirm('是否删除?').then(function () {
       return delContact(Ids);
    }).then(() => {
       getList();
       proxy.$modal.msgSuccess("删除成功");
    }).catch(() => { });
 }
 

 
 /** 多选框选中数据 */
 function handleSelectionChange(selection) {
    ids.value = selection.map(item => item.id);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
 }
 
 function getDeptTree() {
   listDept().then().then(response => {
      optionsList.value = response.data;
   })
   deptTreeSelect({type:1}).then(response => {
      options.value = response.data;
      optionsParams.value = response.data
   });
};
 
 /** 重置新增的表单以及其他数据  */
 function reset() {
    if (menuRef.value != undefined) {
       menuRef.value.setCheckedKeys([]);
    }
    menuExpand.value = false;
    menuNodeAll.value = false;
    deptExpand.value = true;
    deptNodeAll.value = false;
    form.value = {
       id: undefined,
       coutactsName: undefined,
       dingding:null,
       status: '0',
    };
    proxy.resetForm("roleRef");
 }
 
 /** 添加联系人 */
 function handleAdd() {
    reset();
    open.value = true;
    isEdit.value = false
    title.value = "添加";
 }
  const isEdit = ref(false)
 /** 修改联系人 */
 function handleUpdate(row) {
    return

    reset();
    details(row.id).then((res) => {
       console.log('详情', res)
       form.value = res.data;
       open.value = true;
       isEdit.value = true
    }).catch(() => {
       form.value = row;
       open.value = true;
    })
    title.value = "修改";
 }
 
    /** 提交按钮 */
    function submitForm() {
        return
        proxy.$refs["roleRef"].validate(valid => {
        if (valid) {
            if (form.value.id != undefined) {
                update(form.value).then(response => {
                    proxy.$modal.msgSuccess("修改成功");
                    open.value = false;
                    getList();
                });
            } else {
                add(form.value).then(response => {
                    proxy.$modal.msgSuccess("新增成功");
                    open.value = false;
                    getList();
                });
            }
        }
        });
    }
 
    /** 查询部门下拉树结构 && 查询单位下拉选择 */
    const changeCompany = (e)=>{
        form.value.deptId = null
        deptTreeSelect({type:0,parentId:e}).then(response => {
            deptOptions.value = response.data;
        });
    }

 /** 取消按钮 */
 function cancel() {
    open.value = false;
    reset();
 }

 getDeptTree();
 getList();
 </script>
 